<template>
  <div class="time-box">
    <img src="~assets/images/loading.png" alt="">
    <span id="realTime">{{ realDate }}</span>
    <span id="realDate">{{ realDate }}</span>
  </div>
</template>

<script>
export default {
  name: 'TimeBox',
  data() {
    return {
      realTime: '',
      realDate: ''
    }
  },
  mounted() {
    let realTime = setInterval(this.setRealTime(), 1000)
    this.$on('hook:destroyed', () => {
      realTime = clearInterval(realTime)
    })
  },
  methods: {
    // 实时显示时间
    setRealTime() {
      let date, year, month, day, hours, minutes, seconds
      date = new Date()
      year = date.getFullYear()
      month = date.getMonth() + 1
      day = date.getDate()
      hours = date.getHours().toString().length === 2 ? date.getHours() : '0' + date.getHours()
      minutes = date.getMinutes().toString().length === 2 ? date.getMinutes() : '0' + date.getMinutes()
      seconds = date.getSeconds().toString().length === 2 ? date.getSeconds() : '0' + date.getSeconds()
      this.realDate = hours + ':' + minutes + ':' + seconds
      this.realDate = year + '年' + month + '月' + day + '日'
      // 在setInterval的函数中加(),并且return ,就可以第一次也调用
      return this.setRealTime
    }
  }
}
</script>

<style scoped>

</style>
